iT邦幫忙

2

One Month Rails - Day8 - Bootstrap Gem for Rails

  • 分享至 

  • xImage
  •  

以one month rails的線上課程及codecademy的Ruby課程,紀錄及分享一個月來學習的歷程及心得。
Step1: 將Bootstrap Gem加入Gemfile bootstrap-sass gem連結:https://github.com/thomas-mcdonald/bootstrap-sass

將下列code加到gemfile.rb
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'bootstrap-sass', '~> 2.3.2.2'

Step2: Bundle install
terminal
$ bundle install #安裝剛加入的Gem

記得安裝完要重新啟動Rails server

Step3: 加入 bootstrap css
首先新增一個檔案並存在下列路徑:
app/assets/stylesheets/styles.css.scss
貼上以下兩行code
@import 'bootstrap'; #從字面上就很直白是匯入bootstrap
@import 'bootstrap-responsive'; #將bootstrap設定成可適性網頁,意即可隨視窗大小改變layout

Step4: 加入javascript app/assets/javascripts/application.js

//= require jquery.masonry.min.js
//= require bootstrap
//= require_tree

Step5: Style home page
接著就是利用bootstrap來設計你的頁面啦
Bootstrap官網:http://getbootstrap.com/

Step5: Save and Upload to Git and Heroku
terminal
git add .
git commit -am 'Add Bootstrap'
git push
git push heroku master


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言